<template>
  <!-- 统计图页面 -->
    <div class="box">数据中心</div>
    <div v-if="channel.setIsLogin===false">
      <van-button plain type="primary" class="but" @click="login">登录后查看数据</van-button>
    </div>
    <!-- 花费 -->
    <div class="bigbox" v-if="channel.setIsLogin===true">
      <div class="smallbox">
        <img src="../../assets/花费.png" alt="cw">
        <br>
        <span class="wz1">消费累计:</span><van-rolling-text :start-num="0" :target-num="channel.userdata[channel.loginid].consume" stop-order="rtl" />
      </div>
      <!-- 购买件数 -->
      <div class="smallbox">
        <img src="../../assets/购买回收回购.png" alt="cw">
        <br>
        <span class="wz1">购买累计:</span><van-rolling-text :start-num="0" :target-num="channel.userdata[channel.loginid].buy" stop-order="up" />
      </div>

    <!-- 购物车数量 -->
      <div class="smallbox">
        <img src="../../assets/购物车.png" alt="cw">
        <br>
        <span class="wz1">购物车数量:</span><van-rolling-text :start-num="0" :target-num="channel.cardata.length" stop-order="rtl" />
      </div>

      <!-- 浏览次数 -->
      <div class="smallbox">
        <img src="../../assets/专题.png" alt="cw">
        <br>
        <span class="wz1">浏览累计:</span><van-rolling-text :start-num="0" :target-num="channel.userdata[channel.loginid].browse" stop-order="up" />
      </div>

      
       <!-- 登录次数 -->
      <div class="smallbox">
        <img src="../../assets/登录密码.png" alt="cw">
        <br>
        <span class="wz1">登录累计:</span><van-rolling-text :start-num="0" :target-num="channel.userdata[channel.loginid].loginsum" stop-order="rtl" />
      </div>

      <!-- 总商品数量 -->
      <div class="smallbox">
        <img src="../../assets/不好吃就退款.png" alt="cw">
        <br>
        <span class="wz1">商品数量:</span><van-rolling-text :start-num="0" :target-num="50" stop-order="up" />
      </div>
    </div>
    <van-tabbar v-model="active" style="z-index: 1;">
  <van-tabbar-item icon="home-o" :to="{path:'/'}">主页</van-tabbar-item>
  <van-tabbar-item icon="search" :to="{path:'/classify/classify1'}">分类</van-tabbar-item>
  <van-tabbar-item icon="browsing-history-o" :to="{path:'/life'}">数据</van-tabbar-item>
  <van-tabbar-item icon="comment-o" :to="{path:'/message'}">消息</van-tabbar-item>
  <van-tabbar-item icon="setting-o" :to="{path:'/car'}">购物车</van-tabbar-item>
  <van-tabbar-item icon="friends-o" :to="{path:'/mine'}">我的</van-tabbar-item>
</van-tabbar>
  </template>
  
  
  <script setup>
  import { ref } from 'vue';
  import { useCounterStore } from '../../stores/counter'
  import { onMounted } from 'vue';
  import router from '@/router';
    const channel = useCounterStore()
  const active = ref(2)


 


  onMounted(() => {
  window.scrollTo(0,0)
})
  </script>
  
  <style scoped>
  .box{
    width: 100%;
    height: 50px;
    /* background-color:#BEEDC7; */
    color:grey;
    font-family:serif;
    text-align: center;
    line-height: 50px;
    font-size: 20px;
    position: relative;
    border-bottom: 1px solid grey;
    top: 0;
    left: 0;
    z-index: 100;
  }
  .smallbox{
    width: 48%;
    height: 180px;
    float: left;
    border: 1px solid rgb(206, 206, 206);
    background-color: white;
    margin-left: 1%;
    margin-top: 1%;
    border-radius: 10px;
  }
  img{
    width: 50%;
    height: 50%;
    margin-left: 25%;
    margin-top: 10%;
  }
  .wz1{
    margin-left: 20px;
  }
  .but{
    width: 60%;
    height: 50px;
    margin-top: 106px;
    margin-left: 74px;
  }
  </style>
  